<template>
  <el-dialog :modelValue="visiable" width="40%" @close="emit('closed')" :show-close="false">
    <el-carousel indicator-position="none" height="570px" :autoplay="false" v-if="zoneId">
      <!-- tower -->
      <el-carousel-item>
        <TowerTable :zoneId="zoneId" />
      </el-carousel-item>

      <!-- bet -->
      <el-carousel-item>
        <BetTable :zoneId="zoneId" />
      </el-carousel-item>

      <!-- across -->
      <el-carousel-item> across </el-carousel-item>
    </el-carousel>
  </el-dialog>
</template>

<script setup lang="ts">
import TowerTable from '@/components/table/TowerTable.vue'
import BetTable from '@/components/table/BetTable.vue'

defineProps<{
  visiable: boolean
  zoneId: number | undefined
}>()
const emit = defineEmits(['closed'])
</script>

<style scoped></style>
